import React from 'react';
import PropTypes from 'prop-types';
import s from './SafetyPackage.module.css';
import fetch from 'API/fetch';
import { datetime } from '../../../common/formatter';
// 套餐详情
function SafetyPackage() {
	const [plan, setPlan] = React.useState([]);
	const [showTable, setShowTable] = React.useState('none');
	async function getData(taskType) {
		const res = await fetch(`/api/v2/index/get_plan`, {
			method: 'GET',
		}).catch(e => {
			return {};
		});
		if (res.msg === 'ok') {
			setPlan(res.results);
			sessionStorage.setItem('planTimeOut', res.results.expire_time);
		}
	}
	React.useEffect(() => {
		getData();
	}, []);
	const handleMouseOver = () => {
		setShowTable('block');
	};
	const handleMouseOut = () => {
		setShowTable('none');
	};
	return (
		<div
			className={s.main}
			onMouseEnter={handleMouseOver}
			onMouseLeave={handleMouseOut}
		>
			<div
				className={s.icon}
				style={{ display: plan.warning_icon ? 'block' : 'none' }}
			>
				<svg
					width="32px"
					height="17px"
					viewBox="0 0 32 17"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
					xmlnsXlink="http://www.w3.org/1999/xlink"
				>
					<title></title>
					<desc>Created with Sketch.</desc>
					<defs>
						<linearGradient
							x1="30.8850066%"
							y1="42.96875%"
							x2="92.0008226%"
							y2="61.3488601%"
							id="linearGradient-1"
						>
							<stop stopColor="#ED4F06" offset="0%"></stop>
							<stop stopColor="#D62D02" offset="100%"></stop>
						</linearGradient>
						<text
							id="text-2"
							fontFamily="PingFangSC-Regular, PingFang SC"
							fontSize="8"
							fontWeight="normal"
							fill="#FFFFFF"
						>
							<tspan x="4" y="10">
								已过期
							</tspan>
						</text>
						<filter
							x="-29.2%"
							y="-45.5%"
							width="158.3%"
							height="227.3%"
							filterUnits="objectBoundingBox"
							id="filter-3"
						>
							<feOffset
								dx="0"
								dy="2"
								in="SourceAlpha"
								result="shadowOffsetOuter1"
							></feOffset>
							<feGaussianBlur
								stdDeviation="2"
								in="shadowOffsetOuter1"
								result="shadowBlurOuter1"
							></feGaussianBlur>
							<feColorMatrix
								values="0 0 0 0 0.929427803   0 0 0 0 0.309819579   0 0 0 0 0.0237341933  0 0 0 1 0"
								type="matrix"
								in="shadowBlurOuter1"
							></feColorMatrix>
						</filter>
					</defs>
					<g
						id="页面-1"
						stroke="none"
						strokeWidth="1"
						fill="none"
						fillRule="evenodd"
					>
						<g id="编组-3">
							<path
								d="M6,0 L26,0 C29.3137085,-6.08718376e-16 32,2.6862915 32,6 C32,9.3137085 29.3137085,12 26,12 L0,12 L0,12 L0,6 C-4.05812251e-16,2.6862915 2.6862915,6.08718376e-16 6,0 Z"
								id="矩形"
								fill="url(#linearGradient-1)"
							></path>
							<g id="已过期" fill="#FFFFFF" fillOpacity="1">
								<use filter="url(#filter-3)" xlinkHref="#text-2"></use>
								<use xlinkHref="#text-2"></use>
							</g>
						</g>
					</g>
				</svg>
			</div>
			<span className={s.title}>套餐</span>
			<div className={s.plan} style={{ display: showTable }}>
				<table border="0" cellPadding="0" cellSpacing="0">
					<tr className={s.tr1}>
						<td>套餐版本</td>
						<td className={s.tdInfo}>{plan.version || '未开通'}</td>
					</tr>
					<tr className={s.tr2}>
						<td>Web资产数</td>
						<td className={s.tdInfo}>
							{plan.jobs_count >= 0 ? plan.jobs_count : '--'}个
						</td>
					</tr>
					{/* <tr>
						<td>监测次数</td>
						<td>{plan.monitor_count}</td>
					</tr> */}
					{plan.host_job_count > 0 && (
						<tr className={s.tr3}>
							<td>主机资产数</td>
							<td className={s.tdInfo}>
								{plan.host_job_count >= 0 ? plan.host_job_count : '--'}个
							</td>
						</tr>
					)}
					<tr className={s.tr3}>
						<td>到期时间</td>
						<td className={s.tdInfo}>
							{datetime(plan.expire_time, 'YYYY-MM-DD') || '--'}
						</td>
					</tr>
				</table>
			</div>
		</div>
	);
}

SafetyPackage.propTypes = {
	className: PropTypes.string,
	value: PropTypes.shape({
		host: PropTypes.string,
		protocol: PropTypes.string.isRequired,
	}).isRequired,
	disableInput: PropTypes.bool,
	disableSelect: PropTypes.bool,
	onChange: PropTypes.func,
};
SafetyPackage.defaultProps = {
	className: s.SafetyPackage,
	value: { protocol: 'http:' },
	disableInput: false,
	disableSelect: false,
	onChange: x => x,
};

export default SafetyPackage;
